<template>
  <div class="app-main-container">
    <div class="app-main-title">摄像头管理</div>
    <div class="doumee-filter">
      <el-input v-model="filters.name" placeholder="输入监控点名称" clearable />
      <!-- <el-select v-model="filters.status" placeholder="选择使用状态" clearable>
        <el-option
          v-for="item in statusList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select> -->
      <el-button type="primary" @click="getList(1)" v-preventReClick>查找</el-button>
      <el-button @click="clearList" v-preventReClick>清空</el-button>
    </div>
    <el-tabs v-model="active" @tab-click="handleClick">
      <el-tab-pane v-for="(tab, i) in tabList" :key="tab.id" :label="tab.manufacturer" :name="i.toString()">
        <!-- <div class="tips">
          <div class="tips_box">
            <div><p>监控点总数</p><p>{{ info.totalOne || info.totalTwo?info.totalOne + info.totalTwo : 0 }}</p></div>
            <div class="tips_xian" />
            <div><p>在线率</p><p>{{ info.totalps?info.totalps :'100%' }}</p></div>
          </div>
          <div class="tips_box">
            <div><p>在线</p><p>{{ info.totalOne ?info.totalOne :0 }}</p></div>
            <div class="tips_xian" />
            <div><p>离线</p><p>{{ info.totalTwo?info.totalTwo :0 }}</p></div>
          </div>
        </div> -->
        <div class="doumee-filter manufacturer">
          <div>
            <el-button type="primary" @click="showZhpzBtn">添加设备</el-button>
            <!-- <el-button type="primary" @click="cjxz">监控插件下载</el-button>  -->
          </div>
          <div class="detail" @click="manufacturerDetail"><i class="el-icon-warning-outline" /> 厂商说明</div>
        </div>
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table"
        >
          <el-table-column
            align="center"
            label="名称"
            prop="name"
            min-width="200"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="通信协议"
            prop="httpPort"
            min-width="100"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.httpPort == '1'?'https':'http' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="通讯地址"
            prop="ipAddre"
            min-width="200"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="通道"
            prop="aisle"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="经纬度"
            prop="location"
            min-width="140"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="设备编码"
            prop="macId"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="视频流地址"
            prop="realTimeVideoAddress"
            show-overflow-tooltip
            min-width="200"
          />
          <el-table-column
            align="center"
            label="视频流历史地址"
            prop="historicalVideoAddress"
            show-overflow-tooltip
            min-width="200"
          />
          <el-table-column label="操作" align="center" min-width="120">
            <template slot-scope="scope">
              <div class="flex-cc">
                <el-button v-if="functors && functors[0] == '1'" type="text" @click="add(0, scope.row)">实时预览</el-button>
                <el-button v-if="functors && functors[1] == '1'" type="text" @click="removeBtn(scope.row.id)">删除</el-button>
                <!-- <el-button v-if="functors && functors[1] == '1'" type="text" @click="showTimeBtn(scope.row)">录像回放</el-button> -->
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="flex-cc doumee-pagination">
          <el-pagination
            background
            hide-on-single-page
            layout="prev, pager, next"
            :current-page.sync="pagination.page"
            :total="total"
            @current-change="getList"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="选择回放时间"
      :visible.sync="showTime"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      width="600px"
    >
      <div class="xzsj">
        <el-date-picker
          v-model="param.startTime"
          popper-class="rqtc"
          type="datetime"
          placement="top"
          placeholder="选择开始日期时间"
          :picker-options="pickerBeginOption(1)"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
        <div class="division-line">-</div>
        <el-date-picker
          v-model="param.endTime"
          popper-class="rqtc"
          type="datetime"
          placement="top"
          placeholder="选择结束日期时间"
          :picker-options="pickerBeginOption(2)"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelTime">取消</el-button>
        <el-button type="primary" @click="confirmTime" v-preventReClick>确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="playMode==0 ? '实时预览' : '录像回放'"
      :visible.sync="showJk"
      width="1000px"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      @close="gbVideo"
    >
      <div class="videobox">
        <div id="divPlugin" class="divPlugin" />
      </div>
    </el-dialog>
    <el-dialog
      title="添加设备"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="showZhpz"
    >
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="140px">
        <el-form-item label="名称：" prop="name">
          <el-input v-model="form.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="通信协议：" prop="httpPort">
          <el-select v-model="form.httpPort" placeholder="请选择通信协议" clearable style="width: 100%">
            <el-option label="http" value="0" />
            <el-option label="https" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="通讯地址：" prop="ip">
          <el-input v-model="form.ip" placeholder="请输入通讯地址" />
        </el-form-item>
        <el-form-item label="登录账号：" prop="account">
          <el-input v-model="form.account" placeholder="请输入登录账号" />
        </el-form-item>
        <el-form-item label="登录密码：" prop="password">
          <el-input v-model="form.password" placeholder="请输入登录密码" type="password" />
        </el-form-item>
        <el-form-item label="通道：" prop="aisle">
          <el-input v-model="form.aisle" placeholder="请输入通道" />
        </el-form-item>
        <el-form-item label="经度：" prop="longitude">
          <el-input v-model="form.longitude" placeholder="请输入经度" />
        </el-form-item>
        <el-form-item label="纬度：" prop="latitude">
          <el-input v-model="form.latitude" placeholder="请输入纬度" />
        </el-form-item>
        <el-form-item label="设备序列号：" prop="macId">
          <el-input v-model="form.macId" placeholder="请输入设备序列号" />
        </el-form-item>
        <el-form-item label="视频流地址：" prop="realTimeVideoAddress">
          <el-input v-model="form.realTimeVideoAddress" placeholder="请输入视频流地址" />
        </el-form-item>
        <el-form-item label="视频流历史地址：" prop="historicalVideoAddress">
          <el-input v-model="form.historicalVideoAddress" placeholder="请输入视频流历史地址" />
        </el-form-item>
        <!-- <el-form-item label="具体地址：" prop="location">
          <mapDrag class="mapbox" style="height: 500px" @center="getCenter" />
          <div>
            <span class="item" style="color: #666666">经度：</span>
            <span class="item" style="color: #222222; margin-right: 10px">{{ longitude }}</span>
            <span class="item" style="color: #666666">纬度：</span>
            <span class="item" style="color: #222222">{{ latitude }}</span>
          </div>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showZhpz = false">取消</el-button>
        <el-button type="primary" @click="onSubmit" v-preventReClick>确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { cameraDel, getSoftDownLoad, monitory, manufacturerList, manufacturerDetail, cameraAdd, cameraInfo, cameraList } from '@/api'
import { parseTime } from '@/utils'
import store from '@/store'
// import MapDrag from '@/components/Map/mapDrag.vue'
export default {
  // components: {
  //   MapDrag
  // },
  data() {
    return {
      modalDialog: store.getters.dialog,
      info: {},
      tabList: [],
      functors: [],
      active: '0',
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      list: [],
      listLoading: true,
      statusList: [
        { value: '1', label: '在线' },
        { value: '0', label: '离线' }
      ],
      filters: {},
      param: {},
      playWndHeight: '',
      // 视频盒子的宽度
      playWndWidth: '',
      oWebControl: null,
      initCount: 0,
      pubKey: '',
      playMode: 0, // 0 预览 1回放
      cameraIndexCode: '', // 监控点编号
      objData: {},
      showJk: false,
      showTime: false,
      showZhpz: false,
      form: {},
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        ip: [
          { required: true, message: '请输入通讯地址', trigger: 'blur' }
        ],
        httpPort: [
          { required: true, message: '请选择通信协议', trigger: 'change' }
        ],
        account: [
          { required: true, message: '请输入登录账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' }
        ],
        aisle: [
          { required: true, message: '请输入通道', trigger: 'blur' }
        ],
        macId: [
          { required: true, message: '请输入设备序列号', trigger: 'blur' }
        ],
        realTimeVideoAddress: [
          { required: true, message: '请输入视频流地址', trigger: 'blur' }
        ],
        historicalVideoAddress: [
          { required: true, message: '请输入视频流历史地址', trigger: 'blur' }
        ],
        longitude: [
          { required: true, message: '请输入经度', trigger: 'blur' }
        ],
        latitude: [
          { required: true, message: '请输入纬度', trigger: 'blur' }
        ],
        location: [
          { required: true, message: '请选择具体地址', trigger: 'blur' }
        ]
      },
      companyVideoData: {},
      iWidth: '1000',
      iHeight: '500',
      webVideo: {},
      iStreamType: 1,
      iChannelID: ''
    }
  },
  // computed: {
  //   latitude() {
  //     return this.form.location
  //       ? this.form.location.split(',')[0]
  //       : ''
  //   },
  //   longitude() {
  //     return this.form.location
  //       ? this.form.location.split(',')[1]
  //       : ''
  //   }
  // },
  created() {
    this.tomanufacturerList()
  },
  destroyed() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0)
    if (oWndInfo != null) {
      // 已经在播放了，先停止
      WebVideoCtrl.I_Stop()
    }
  },
  methods: {
    getCenter(data) {
      this.$set(this.form, 'postion', data.address)
      this.$set(this.form, 'location', data.lnglat)
      this.$refs.ruleForm.clearValidate()
    },
    removeBtn(id) {
      const that = this
      this.$confirm('此操作将删除摄像头, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          cameraDel({ param: { id }}).then((res) => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              that.$message.success('删除成功')
              that.getList(1)
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => {})
    },
    videoInitPlugin() {
      // 
      console.log('初始化1')
      console.log('初始化', WebVideoCtrl)
      var iRet = WebVideoCtrl.I_CheckPluginInstall()
      if (iRet === -1) {
        this.$message.error('您还未安装过插件，请安装WebComponentsKit.exe插件！')
        return
      }
      this.initPlugin()
    },
    // 插件初始化
    initPlugin() {
      console.log('初始化3')
      WebVideoCtrl.I_InitPlugin(this.iWidth, this.iHeight, {
        bWndFull: true, // 是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        iPackageType: 2, // 2:PS 11:MP4
        iWndowType: 1,
        bNoPlugin: true,
        // bDebugMode: true,
        cbSelWnd: function(xmlDoc) {
        },
        cbInitPluginComplete: function() {
          WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin')
          // 检查插件是否最新
          // if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
          //   alert("检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！");
          //   return;
          // }
        }
      })
      // 检查插件是否最新
      // if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
      //     alert("检测到新的插件版本，请双击WebComponents.exe插件，进行升级！");
      //     // return;
      // }
      this.clickLogin(this.companyVideoData)
    },
    clickLogin(data) {
      console.log('dl')
      var that = this
      WebVideoCtrl.I_Login(
        data.IP,
        1,
        data.Port,
        data.Username,
        data.Password,
        {
          success: function(xmlDoc) {
            console.log('开始预览') // 不能删除
            that.getChannelInfo()
          },
          error: function() {
            console.log('login error')
          }
        }
      )
    },
    // 获取通道
    getChannelInfo() {
      var that = this
      // this.szIP = this.companyVideoData.IP
      // 模拟通道
      console.log('模拟通道', that.playMode)
      WebVideoCtrl.I_GetAnalogChannelInfo(that.companyVideoData.IP, {
        async: false,
        success: function(xmlDoc) {
          console.log('获取模拟通道成功！')
          if (that.playMode === 1) {
            that.startPlayback()
          } else {
            that.initPlay()
          }
        },
        error: function() {
          console.log('获取模拟通道失败！' + WebVideoCtrl.I_GetLastError())
        }
      })
      // 数字通道
      WebVideoCtrl.I_GetDigitalChannelInfo(that.companyVideoData.IP, {
        async: false,
        success: function(xmlDoc) {
          if (that.playMode === 1) {
            that.startPlayback()
          } else {
            that.initPlay()
          }
          console.log('获取数字通道成功！')
        },
        error: function() {
          WebVideoCtrl.I_GetLastError()
          console.log('获取数字通道失败！' + WebVideoCtrl.I_GetLastError())
        }
      })
      // 零通道
      WebVideoCtrl.I_GetZeroChannelInfo(that.companyVideoData.IP, {
        async: false,
        success: function(xmlDoc) {
          console.log('获取零通道成功！')
        },
        error: function() {
          console.log('获取零通道失败！' + WebVideoCtrl.I_GetLastError())
        }
      })
    },
    // 初始化视频，为了让用户进来就可以看到视频播放
    initPlay() {
      console.log('初始化视频')
      const szIP = this.companyVideoData.IP // ip地址
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0)
      if (oWndInfo != null) {
        // 已经在播放了，先停止
        WebVideoCtrl.I_Stop()
      }
      // 目前只需要显示一个通道
      WebVideoCtrl.I_StartRealPlay(szIP, {
        iStreamType: parseInt('1', 10),
        iChannelID: this.companyVideoData.iChannelID
      })
      // WebVideoCtrl.I_ChangeWndNum(parseInt('1', 10))
    },
    startPlayback() {
      console.log('回放')
      var oTransCodeParam = {
        TransFrameRate: '14', // 0：全帧率，5：1，6：2，7：4，8：6，9：8，10：10，11：12，12：16，14：15，15：18，13：20，16：22
        TransResolution: '1', // 255：Auto，3：4CIF，2：QCIF，1：CIF
        TransBitrate: '19'// 2：32K，3：48K，4：64K，5：80K，6：96K，7：128K，8：160K，9：192K，10：224K，11：256K，12：320K，13：384K，14：448K，15：512K，16：640K，17：768K，18：896K，19：1024K，20：1280K，21：1536K，22：1792K，23：2048K，24：3072K，25：4096K，26：8192K
      }
      WebVideoCtrl.I_StartPlayback(this.companyVideoData.IP, {
        iRtspPort: this.companyVideoData.Port,
        iStreamType: 1,
        iChannelID: this.companyVideoData.iChannelID,
        szStartTime: this.param.startTime,
        szEndTime: this.param.endTime,
        oTransCodeParam: oTransCodeParam,
        success: function() {
          // this.$message.success('开始回放成功！')
          console.log('开始回放成功！')
        },
        error: function(status, xmlDoc) {
          if (status === 403) {
            this.$message.error('设备不支持Websocket取流！')
          } else {
            this.$message.error('开始回放失败！')
          }
        }
      })
    },
    showZhpzBtn() {
      this.form = {}
      this.showZhpz = true
    },
    onSubmit() {
      const that = this
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const param = { ... that.form }
          param.venueId = sessionStorage.getItem('venueId')
          param.manuFacturer = that.tabList[this.active].type
          param.manuFacturerName = that.tabList[this.active].manufacturer
          param.userId = sessionStorage.getItem('userId')
          param.location = param.longitude + ',' + param.latitude
          cameraAdd({
            param
          }).then(res => {
            if (res.errorCode === '000000') {
              that.$message.success('添加设备成功')
              that.showZhpz = false
              that.getList(1)
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    tbBtn() {
      monitory({ param: { manufacturerId: this.tabList[this.active].id, venueId: sessionStorage.getItem('venueId') }}, sessionStorage.getItem('venueId')).then(res => {
        if (res.errorCode === '000000') { this.getList(1) }
      }).catch(err => {
        console.log(err)
      })
    },
    pickerBeginOption(e) {
      const date = new Date()
      const minutes = date.getMinutes()
      // h和m 是将日期只取时分
      const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      const m = (minutes < 10 ? '0' + minutes : minutes)
      // pickerDate 判断当前选择时间是否等于上条数据时间
      // 若等于时，限制时间从00：00：00 - 上条数据开始时间，不等于时，24小时可选
      let str = ''
      if (e === 1) { str = this.param.startTime } else { str = this.param.endTime }
      const pickerDate = date.toDateString() === new Date(str).toDateString()
      return { disabledDate: (time) => {
        return time.getTime() > new Date().getTime()
      },
      selectableRange: pickerDate ? '00:00:00 -' + h + m + ':00' : '00:00:00 - 23:59:59' }
    },
    handleClick(e) {
      this.getList(1)
    },
    clearList() {
      this.filters = {}
      this.getList(1)
    },
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      cameraList({ pagination, param: { venueId, ...filters, manuFacturer: this.tabList[this.active].type }}, sessionStorage.getItem('venueId')).then(res => {
        this.list = res.recordList
        this.total = res.totalCount
        this.info = res
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    tomanufacturerList() {
      manufacturerList({ param: { type: '3' }}, sessionStorage.getItem('venueId')).then(res => {
        this.tabList = res.recordList
        this.functors = res.recordList[0].functors || []
        this.getList(1)
      }).catch(err => {
        console.log(err)
      })
    },
    cjxz() {
      getSoftDownLoad({ param: { manufacturerId: this.tabList[this.active].id }}, sessionStorage.getItem('venueId')).then(res => {
        if (res.errorCode === '000000') {
          window.open(res.record, '_blank')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    manufacturerDetail() {
      manufacturerDetail({ param: { manufacturerId: this.tabList[this.active].id }}, sessionStorage.getItem('venueId')).then(res => {
        if (res.errorCode === '000000') {
          const cont = res.record.manufacturer + res.record.text.replace(/\n/g, '<br/>')
          this.$alert(cont, '厂商说明', {
            dangerouslyUseHTMLString: true
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    showTimeBtn(e) {
      this.showTime = true
      cameraInfo({ param: { id: e.id }}, sessionStorage.getItem('venueId')).then(res => {
        if (res.errorCode === '000000') {
          this.companyVideoData = {
            IP: res.record.ip,
            Port: res.record.httpPort,
            Username: res.record.account,
            Password: res.record.password,
            iChannelID: res.record.aisle
          }
          this.showJk = true
          this.playMode = e
          this.videoInitPlugin()
        }
      }).catch(err => {
        console.log(err)
      })
      this.param = {}
    },
    cancelTime() {
      this.showTime = false
    },
    confirmTime() {
      if (!this.param.startTime) {
        this.$message.error('请选择开始时间')
        return
      }
      if (!this.param.endTime) {
        this.$message.error('请选择结束时间')
        return
      }
      var startTime = new Date(this.param.startTime).getTime()
      var endTime = new Date(this.param.endTime).getTime()
      if (endTime <= startTime) {
        this.$message.warning('结束时间不能早于开始时间')
        return
      }
      this.showTime = false
      this.add(1)
    },
    gbVideo() {
      WebVideoCtrl.I_Stop()
      WebVideoCtrl.I_Logout(this.companyVideoData.IP)
      this.showJk = false
    },
    add(e, cont) {
      if (e === 0) {
        cameraInfo({ param: { id: cont.id }}, sessionStorage.getItem('venueId')).then(res => {
          if (res.errorCode === '000000') {
            this.companyVideoData = {
              IP: res.record.ip,
              Port: res.record.httpPort,
              Username: res.record.account,
              Password: res.record.password,
              iChannelID: res.record.aisle
            }
            this.showJk = true
            this.playMode = e
            this.videoInitPlugin()
          }
        }).catch(err => {
          console.log(err)
        })
      } else {
        this.showJk = true
        this.playMode = e
        this.videoInitPlugin()
      }
    },
    dateFormat(oDate, fmt) {
      const o = {
        'M+': oDate.getMonth() + 1, // 月份
        'd+': oDate.getDate(), // 日
        'h+': oDate.getHours(), // 小时
        'm+': oDate.getMinutes(), // 分
        's+': oDate.getSeconds(), // 秒
        'q+': Math.floor((oDate.getMonth() + 3) / 3), // 季度
        'S': oDate.getMilliseconds()// 毫秒
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (oDate.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (const k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      return fmt
    }
  }
}
</script>

<style lang="scss" scoped>
.hksp {
  width: 100%;
  height: 70vh;
}
.xzsj {
  display: flex;
  align-items: center;
  .division-line {
    margin: 0 20px;
  }
}
.tips{
  display: flex;
  margin-bottom: 20px;
  .tips_box{
    flex: 1;
    display: flex;
    align-items: center;
    background-color: rgba(32, 178, 170, 1);
    &:first-of-type{
      margin-right: 10px;
    }
    &:last-of-type{
      margin-left: 10px;
      background-color: rgba(65, 105, 225, 1);
    }
    div {
      font-size: 20px;
      color: #fff;
      text-align: center;
      padding: 20px 0;
      line-height: 1.5;
      flex: 1;
      p{
        margin: 0;
        &:last-of-type{
          margin-top: 20px;
          font-size: 24px;
          font-weight: bold;
        }
      }
      &.tips_xian{
        width: 1px;
        height: 80px;
        background-color: #fff;
        flex: none;
      }
    }
  }
}
.videobox {
  width: 100%;
  height: 500px;
  overflow: hidden;
}
</style>
<style>
.rqtc .el-picker-panel__footer .el-button--text{
  display: none !important;
}
</style>
